﻿@page "/DateRangePicker/Month-Range-Picker"

@using Syncfusion.Blazor.Calendars
@using System

@inherits SampleBaseComponent;

<SampleDescription>
   <p>The Blazor [Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) example demonstrates the DateRangePicker component acting as a month range picker. It allows you to select values within the range of months.</p>
</SampleDescription>
<ActionDescription>
    <p>DatePicker has the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_Start' target='_blank'> Start</a> and the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_Depth' target='_blank'> Depth</a> properties that provide options to restrict users from navigating to any Calendar view (year, month, or decade).</p>
</ActionDescription>

<div class=" col-lg-12 control-section">
    <div id="wrapper" class="daterangepicker-section">
        <div id="daterangepicker-control">
            <SfDateRangePicker TValue="DateTime?" Format="MMM yyyy" Placeholder="Choose a Range" Start="CalendarView.Year" Depth="CalendarView.Year"></SfDateRangePicker>
        </div>
    </div>
</div>

<style>
    #wrapper {
        max-width: 300px;
        margin: 0px auto;
        padding-top: 70px;
    }
</style>